<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="报表" prop="type">
        <el-select
          v-model="queryParams.type"
          placeholder="报备情况-按所统计"
          clearable
          size="small"
          class="width220"
          @change="handleQuery"
        >
          <el-option
            v-for="(item,index) in reportFormOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="事务所" prop="firmName">
        <el-input v-model="queryParams.firmName" placeholder="请输入事务所名称"  @change="handleQuery" clearable></el-input>
      </el-form-item>
      <el-form-item label="注册会计师" prop="registrantName">
        <el-input v-model="queryParams.registrantName" placeholder="请输入注册会计师名称"  @change="handleQuery" clearable></el-input>
      </el-form-item>
      <el-form-item label="上报日期" prop="approvedPracticeDate">
        <el-date-picker
          v-model="approvedPracticeDate"
          size="small"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          @change="handleQuery"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">下载报表</el-button>
        <el-button type="warning" icon="el-icon-download" size="mini" @click="expertDataVisible = true">大批量下载报表</el-button>
      </el-form-item>
    </el-form>
<!--    报表-->
    <my-table v-loading="loading"
              :col="col"
              :data="dataList">
    </my-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :autoScroll="false"
      @pagination="getList"
    > </pagination>
    <el-dialog
      title="下载报表"
      :visible.sync="expertDataVisible"
      width="360px"
      append-to-body
      center
      class="expertList"
    >
      <el-form :model="commonForm"  ref="commonForm" >
        <el-form-item  label="下载条数">
          <el-select
            v-model="pageOption"
            placeholder="点击进行选择"
            clearable
            filterable
            size="small"
            class="width170"
          >
            <el-option label="1000" value="1000"/>
            <el-option label="2000" value="2000"/>
            <el-option label="5000" value="5000"/>
            <el-option label="全部" value="ALL"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleExport2">导出</el-button>
        <el-button @click="expertDataVisible=false;">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import MyTable from './components/my-table'
  import { getTableHeader, getTableColumn,downloadReportForm } from '@/api/system/reportForm'
export default {
  name: "ReportForms",
  components: { MyTable },
  data() {
    return {
      col: [],
      dataList:[],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      expertDataVisible:false,
      pageOption:1000,
      commonForm:{},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: '',
        firmName:undefined,
        registrantName:undefined,
      },
      approvedPracticeDate:undefined,
      // 8种报表
      reportFormOptions: [
        {
          value: '报备情况-按所统计',
          label: '报备情况-按所统计'
        }, {
          value: '报备情况-按CPA统计',
          label: '报备情况-按CPA统计'
        }, {
          value: '财报意见类型-按所',
          label: '财报意见类型-按所'
        }, {
          value: '财报意见类型-按CPA',
          label: '财报意见类型-按CPA'
        }, {
          value: '验资业务-按所',
          label: '验资业务-按所'
        }, {
          value: '验资业务-按CPA',
          label: '验资业务-按CPA'
        }, {
          value: '更换事务所统计',
          label: '更换事务所统计'
        }, {
          value: '根据注师汇总报告-报告数量畸多',
          label: '根据注师汇总报告-报告数量畸多'
        }
      ]
    };
  },
  created() {
    this.$route.query.type
      ? this.queryParams.type = this.$route.query.type
      : this.queryParams.type = '报备情况-按所统计'
    this.getList();
    this.getHead();
  },
  methods: {
    /** 查询列表 */
    async getList() {
      this.dataList = [];
      this.queryParams.startTime = this.approvedPracticeDate && this.approvedPracticeDate[0] ? this.approvedPracticeDate[0]:'';
      this.queryParams.endTime = this.approvedPracticeDate && this.approvedPracticeDate[1] ? this.approvedPracticeDate[1]:'';
      this.loading = true;
      const res = await getTableColumn(this.queryParams)
      this.dataList = res.rows;
      this.total = res.total;
      this.loading = false;
    },
    async getHead(){
      this.col = [];
      const res = await getTableHeader(this.queryParams);
      this.col = res.data.col
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getHead();
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.approvedPracticeDate = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 下载报表 */
    handleExport() {
      const queryParams = this.queryParams;
      this.downReportFormData(queryParams);
    },
    /** 下载报表2 */
    handleExport2() {
      let queryParams = null;
      let params = JSON.stringify(this.queryParams)
      queryParams = JSON.parse(params)
      let pageSize= this.pageOption;
      if(pageSize != undefined && pageSize == 'ALL'){
        queryParams.pageSize = null;
        queryParams.pageNum = null;
      }else{
        queryParams.pageSize = pageSize;
        queryParams.pageNum = 1;
      }
      this.downReportFormData(queryParams);
      this.expertDataVisible=false;
    },
    downReportFormData(queryParams){
      this.$confirm("是否确认导出当前报表?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return downloadReportForm(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        })
        .catch(function () {});
    }
  }

};
</script>
<style lang="scss" scoped>
  .app-container{
    position: relative;
  }
  .expertList{
    ::v-deep .el-dialog .el-dialog__body{
      min-height: auto;
    }
  }
  /*form 表单 样式设置 start*/
  ::v-deep .el-form-item{
    margin-bottom: 10px;
  }
  /*form 表单 样式设置 end*/

  .width220{
    width: 220px;
  }

</style>
